{extend name="common/main"/}
{block name="style"}
    <link href="__COMMON__/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
    <link href="__ZUI__/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
    <style>
    .web_uploader_picture_list {
        background: #eee;
        content: "无图";
        margin-top: 10px;
        border: 1px solid #eee;
        width: 150px;
        height: 100px;
        overflow: hidden;
    }

    .web_uploader_picture_list img {
        width: 150px;
        height: 100px;
    }

    #data-table {
        list-style: none;
        padding-left: 0;
    }

    #data-table li {
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
        padding-top: 10px;
        background: #f6f6f6;
        margin-bottom:5px;
        border-radius: 4px;
        border:1px solid #f2f2f2;
    }

    #data-table .dragging {
        background-color: #fff4e5;
        opacity: 0.35;
    }

    .data-header {
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
    }
    .editBtn {
        display:table-cell;
        height: 92px;  
        text-align: center;
    }
    .editBtn:before{
         content: ".";
         height: 100%;
         display: inline-block;
         vertical-align: middle;
         visibility: hidden;
    }
    </style>
{/block}
{block name="body"}
    <!-- 标题 -->
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>
    <!-- 数据表格 -->
    <div class="with-padding">
        <form action="{:url('editadv?pos_id='.$pos['id'])}" method="post" class="form-horizontal">
            <label class="item-label">所属广告位： </label>
            <div class="controls ">
                <input type="hidden" name="pos_id" value="{$pos.id}"  readonly/>
                <input name="type" type="hidden" value="2">
                <div style="margin-bottom: 15px">
                    <span class="label label-success">广告名：{$pos.title}</span>
                    <span class="label label-danger">标识：{$pos.name}</span>
                    <span class="label">路径：{$pos.path}</span>
                </div>
            </div>
            
            <div class="item-action" style="margin-bottom: 15px">
                <label class="item-label">图片列表： </label>
                <a class="btn btn-sm btn-success" data-role="add-adv"><i class="icon-plus"></i> 添加广告</a>
            </div>
            <ul id="data-table" data-role="data-table">
                {volist name="list" id="vo"}
                    <li class="line clearfix">
                        <input type="hidden" name="adv_id[]" value="{$vo.id}" />
                        <div class="col-xs-2">
                            <span id="web_uploader_wrapper_{$i}">选择图片</span>
                            <input id="web_uploader_input_{$i}" name="pic[]" type="hidden" value="{$vo.pic}"
                                   event-node="uploadinput">

                            <div id="web_uploader_picture_list_{$i}" class="web_uploader_picture_list">
                                {notempty name="vo.pic"}
                                <img src="{$vo.pic|pic}">
                                {/notempty}
                            </div>
                        </div>
                        <div class="col-xs-10">
                            <div class="row">
                            <div class="col-xs-2">标题 
                                <input type="text" name="title[]" value="{$vo.title}"
                                       class="text input-large form-control" style="width: 100%"/>
                            </div>
                            <div class="col-xs-2">Url
                                <input type="text" name="url[]" value="{$vo.url}"
                                       class="text input-large form-control" style="width:  100%"/>
                            </div>
                            <div class="col-xs-2">生效时间
                                <input type="hidden" name="start_time[]" value="{$vo.start_time}"/>

                                <input type="text" data-field-name="start_time"
                                       class="text input-large form-datetime time form-control"
                                       style="width: 130px" value="{$vo.start_time|date='Y-m-d H:i',###}"
                                       placeholder="请选择时间"/>

                            </div>
                            <div class="col-xs-2">失效时间
                                <input type="hidden" name="end_time[]" value="{$vo.end_time}"/>
                                <input type="text" data-field-name="end_time"
                                       class="text input-large form-datetime time form-control"
                                       style="width: 130px" value="{$vo.end_time|date='Y-m-d H:i',###}"
                                       placeholder="请选择时间"/>
                            </div>
                            <div class="col-xs-2">打开方式
                                <select id="target_{$vo.id}" name="target[]" class="form-control" style="width: 100%">
                                    <option value="_blank" selected>新窗口:_blank</option>
                                    <option value="_self">当前层:_self</option>
                                    <option value="_parent">父框架:_parent</option>
                                    <option value="_top">整个框架:_top</option>
                                </select>
                                <script>
                                    $('#target_{$vo.id}').val("{$vo.target}")
                                </script>
                            </div>

                            <div class="col-xs-2">
                                排序
                                <input type="text" name="sort[]" value="{$vo.sort}"
                                       class=" text input-large form-control" style="width: 40px"/>
                            </div>

                            <div class="col-xs-6"><div>描述</div>
                                <textarea name="description[]" class="form-control" rows="3" placeholder="广告描述">
                                {notempty name="vo.description"}
                                    {$vo.description}
                                {/notempty}
                                </textarea>
                            </div>
                            <div class="col-xs-6">
                                <div class="editBtn">
                                    <a class="btn btn-danger btn-xs" data-role="remove-adv">
                                        <i class="icon-trash"></i> 删除
                                    </a>
                                    <a href="javascript:" class="btn btn-warning sort-handle btn-xs">
                                        <i class="icon-move"></i> 移动
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </li>
                {/volist}
            </ul>
            <br/>

            <div class="form-item">
                <button class="btn btn-success submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal" style="width: 100px">确定</button>
                &nbsp;
                <a class="btn btn-default" href="{:Url('adv?pos_id='.$pos['id'])}">返回广告管理</a>
                &nbsp; <a class="btn btn-danger" data-role="init-adv">清空并重置
            </a></div>
        </form>
    </div>

    <script id="line-tpl" style="display: none" type="text/html">
        <li class="line clearfix">
        <div class="col-xs-2">
        </div>
        <div class="col-xs-10">
            <div class="row">
                <div class="col-xs-2">标题 
                    <input type="text" name="title[]" value=""
                           class="text input-large form-control" style="width: 100%"/>
                </div>
                <div class="col-xs-2">Url
                    <input type="text" name="url[]" value=""
                           class="text input-large form-control" style="width:  100%"/>
                </div>
                <div class="col-xs-2">生效时间
                {php}$start=time();{/php}
                    <input type="hidden" name="start_time[]" value="{$start}"/>
                    <input type="text" data-field-name="start_time"
                           class="text input-large form-datetime time form-control"
                           style="width: 130px" value="{$start|date='Y-m-d H:i',###}"
                           placeholder="请选择时间"/>

                </div>

                <div class="col-xs-2">失效时间
                {php}$end=time()+7*60*60*24;{/php}
                    <input type="hidden" name="end_time[]" value="{$end}"/>
                    <input type="text" data-field-name="end_time"
                           class="text input-large form-datetime time form-control"
                           style="width: 130px" value="{$end|date='Y-m-d H:i',###}"
                           placeholder="请选择时间"/>
                </div>

                <div class="col-xs-2">打开方式
                    <select id="target_" name="target[]" class="form-control" style="width: 100%">
                        <option value="_blank" selected>新窗口:_blank</option>
                        <option value="_self">当前层:_self</option>
                        <option value="_parent">父框架:_parent</option>
                        <option value="_top">整个框架:_top</option>
                    </select>

                </div>

                <div class="col-xs-2">
                    排序
                    <input type="text" name="sort[]" value=""
                           class=" text input-large form-control" style="width: 80px"/>
                </div>
                <div class="col-xs-6">
                <div>描述</div>
                    <textarea name="description[]" class="form-control" rows="3" placeholder="广告描述">
                        
                    </textarea>
                </div>
                <div class="col-xs-6">
                    <div class="editBtn">
                        <a class="btn btn-danger btn-xs" data-role="remove-adv">
                            <i class="icon-trash"></i> 删除
                        </a>
                        <a href="javascript:" class="btn btn-warning sort-handle btn-xs">
                            <i class="icon-move"></i> 移动
                        </a>
                    </div>
                </div>
            </div>
        </div>
        </li>
    </script>
{/block}
{block name="script"}
<script type="text/javascript" src="__ZUI__/lib/datetimepicker/datetimepicker.min.js"></script>
<script type="text/javascript" src="__ZUI__/lib/sortable/zui.sortable.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__COMMON__/lib/webuploader/js/webuploader.js"></script>
<script>
$(function () {
    var builder = {
        'uploaders': [],
        'index': 1,
        'sortable': function () {
            $('#data-table').sortable({
                trigger: '.sort-handle', 
                selector: 'li',
                dragCssClass: '',
                finish: function () {
                    // builder.sortable();
                    builder.refresh_order();
                }
            });
        },
        'refresh_order': function () {
            $('#data-table li').each(function (index, element) {
                $(this).attr('data-order', index);
                $(this).find('input[name*=sort]').val($(this).attr('data-order'));
            })
        },
        'init': function () {
            var $html = $($('#line-tpl').html());
            $('#data-table').html($html);
            builder.createWebUpload($html, $html);
            initTimePicker();

            builder.sortable();
            builder.refresh_order();
        },
        'add': function (obj) {
            var $this = $(obj);
            var $html = $($('#line-tpl').html());
            $(obj).prepend($html);
            builder.createWebUpload($html, $(obj+ 'li:eq(0)'));
            //$html.insertAfter($this.parent().parent().parent().parent().parent());
            //builder.createWebUpload($html, $this.parent().parent().parent().parent().parent());
            initTimePicker();

            builder.sortable();
            builder.refresh_order();
            bind_time_change();

        },
        'remove': function (obj) {
            $(obj).parent().parent().parent().parent().parent().remove();
            builder.sortable();
            builder.refresh_order();

        },
        'createWebUpload': function ($html, $parent_parent) {
            var id = builder.index++;
            $html.find('div:eq(0)').html(
                '<span id="web_uploader_wrapper_' + id + '">选择图片</span>\
                <input id="web_uploader_input_' + id + '" name="pic[]" type="hidden" value=""\
                event-node="uploadinput">\
                <div id="web_uploader_picture_list_' + id + '" class="web_uploader_picture_list">\
                </div>'
            );
            $html.insertAfter($parent_parent);
            builder.createUploader(id);
        },
        'createUploader': function (id_origin) {
            var id = "#web_uploader_wrapper_" + id_origin;
            var uploader = WebUploader.create({
                // swf文件路径
                swf: 'Uploader.swf',
                // 文件接收服务端。
                server: "{:url('api/File/uploadPicture')}",
                fileNumLimit: 5,
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: {'id': id, 'multi': false}
            });

            uploader.on('fileQueued', function (file) {
                uploader.upload();
                $("#web_uploader_file_name_" + id_origin).text('正在上传...');
            });

            /*上传成功*/
            uploader.on('uploadSuccess', function (file, ret) {
                console.log(ret);
                if (ret.code == 0) {
                    $("#web_uploader_file_name_" + id_origin).text(ret.msg);
                    toast.error(ret.info);
                } else {
                    $('#web_uploader_input_' + id_origin).focus();
                    $('#web_uploader_input_' + id_origin).val(ret.data[0].id);
                    $('#web_uploader_input_' + id_origin).blur();

                    $("#web_uploader_picture_list_" + id_origin).html('<img src="' + ret.data[0].path + '"/>');
                }
            });
            builder.uploaders.push(uploader);
        }
    };
    //builder.sortable();//默认执行一次

    function initTimePicker() {
        $('.form-datetime').datetimepicker({
            language: "zh-CN",
            autoclose: true,
            format: 'yyyy-mm-dd hh:ii'
        });
        $('.form-date').datetimepicker({
            language: "zh-CN",
            minView: 2,
            autoclose: true,
            format: 'yyyy-mm-dd'
        });
        $('.form-time').datetimepicker({
            language: "zh-CN",
            minView: 0,
            startView: 1,
            autoclose: true,
            format: 'hh:ii'
        });
        bind_time_change();

    }
    function bind_time_change() {
        $('.time').change(function () {
            var dateString = $(this).val();
            var date = new Date(dateString);
            var timestamp = date.getTime();
            $(this).prev().val(Math.floor(timestamp / 1000));
        });
    }

    var children = $('#data-table').children();
    if (children.length == 0) {
        builder.init();
    }else{
        for (var i = 0; i < children.length; i++) {
            builder.createUploader(i + 1);
        }

        builder.index = i + 1;
        initTimePicker();
        bind_time_change();
    }

    //添加按钮
    $('[data-role="add-adv"]').click(function(){
        builder.add('#data-table');
    });
    //移除按钮
    $('[data-role="remove-adv"]').click(function(){
        builder.remove($(this));
    });
    //清空并重置按钮
    $('[data-role="init-adv"]').click(function(){
        builder.init();
    });

});
</script>
{/block}